<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>日历关系图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 模拟数据
function getVirtualData(year) {
	const date = +echarts.time.parse(year + '-01-01');
	const end = +echarts.time.parse(+year + 1 + '-01-01');
	const dayTime = 3600 * 24 * 1000;
	const data = [];
	for (let time = date; time < end; time += dayTime) {
		data.push([
			echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
			Math.floor(Math.random() * 10000)
		]);
	}
	return data;
}

const graphData = [
	['2017-02-01', 260],
	['2017-02-04', 200],
	['2017-02-09', 279],
	['2017-02-13', 847],
	['2017-02-18', 241],
	['2017-02-23', 411],
	['2017-03-14', 985]
];
const links = graphData.map(function (item, idx) {
	return {
		source: idx,
		target: idx + 1
	};
});
links.pop();
// console.log(graphData);
// console.log(links);

// 指定图表的配置项和数据
var option = {
	tooltip: {
		position: 'top',
		formatter: function (p) {
			if(p.data['source'] !== undefined){
				//箭头线
				return graphData[p.data.source][0] + " --> " + graphData[p.data.target][0];
			}else{
				//热力图块
				const format = echarts.time.format(p.data[0], '{yyyy}-{MM}-{dd}', false);
				return format + ': ' + p.data[1];
			}
		}
	},
	calendar: {
		top: 'middle',
		left: 'center',
		orient: 'vertical',
		cellSize: 40,
		yearLabel: {
			margin: 50,
			fontSize: 30
		},
		dayLabel: {
			firstDay: 1,
			nameMap: 'cn'
		},
		monthLabel: {
			nameMap: 'cn',
			margin: 15,
			fontSize: 20,
			color: '#999'
		},
		range: ['2017-02', '2017-03-31']
	},
	visualMap: {
		min: 0,
		max: 1000,
		// type: 'piecewise',
		left: 'center',
		top: 20,
		inRange: {
			color: ['#ff0000', '#ffa486', '#ffe0dc']
		},
		seriesIndex: [1],
		orient: 'horizontal'
	},
	series: [
		{
			type: 'graph',
			edgeSymbol: ['none', 'arrow'],
			coordinateSystem: 'calendar',
			calendarIndex: 0,
			links: links,
			symbolSize: 15,
			itemStyle: {
				color: 'yellow',
				shadowBlur: 9,
				shadowOffsetX: 1.5,
				shadowOffsetY: 3,
				shadowColor: '#555'
			},
			lineStyle: {
				color: '#D10E00',
				width: 1,
				opacity: 1
			},
			data: graphData,
			z: 20
		},
		{
			type: 'heatmap',
			coordinateSystem: 'calendar',
			data: getVirtualData('2017')
		}
	]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

// 处理点击事件
myChart.on('click', function (params) {
	// console.log(params);
	console.log(params.data);
});
// myChart.on('mouseover', function (params) {
// 	// console.log(params);
// 	console.log(params.data);
// });

</script>
</html>
